<template>
  <div class="upload-container">
    <!-- 上传组件 -->
    <el-upload
      ref="uploadRef"
      action="#"
      :auto-upload="false"
      :multiple="true"
      :limit="5"
      :on-exceed="handleExceed"
      v-model:file-list="fileList"
      accept="image/*"
    >
      <el-button type="primary">选择图片</el-button>
      <template #tip>
        <div class="el-upload__tip">支持上传JPG/PNG格式，最多上传5张，单张不超过5MB</div>
      </template>
    </el-upload>

    <!-- 上传按钮 -->
    <el-button type="success" style="margin-top: 20px" @click="handleUpload" :loading="loading">
      开始上传
    </el-button>
    <br />
    <!-- 结果展示 -->
    <!-- <div v-if="responseData" class="response-area">
      <h3>服务器响应：</h3>
      <pre>{{ responseData }}</pre>
    </div> -->

    <!-- 查询展示 -->
    <el-button type="primary" style="margin-top: 20px" @click="getImaData">查询图片</el-button>
    <div v-if="imgData.length > 0">
      <div v-for="(item, index) in imgData" :key="item" class="img-item">
        <span>{{ index }}</span>
        <img :src="item.filePath" alt="图片" style="width: 100px; height: 100px; margin: 10px" />
        <span>{{ item.createTime }}</span>
        <span v-if="item.isScanned">已被扫描</span>
        <span v-else>未被扫描</span>
      </div>
    </div>
  </div>
  <el-pagination
    background
    layout="prev, pager, next"
    :total="100"
    :page-size="10"
    :pager-count="11"
    @current-change="handleCurrentChange"
    class="pagination"
  />
</template>

<script setup>
import { ref } from 'vue'
import httpInstance from '@/utils/http'

// 响应式数据
const uploadRef = ref(null)
const fileList = ref([])
const loading = ref(false)
const responseData = ref(null)
const imgData = ref([])

// 文件上传示例
const handleUpload = async () => {
  try {
    loading.value = true
    const formData = new FormData()
    console.log('上传的文件列表:', fileList.value)

    fileList.value.forEach((file) => {
      formData.append('files', file.raw)
    })
    // console.log('上传的文件列表:', formData)

    const response = await httpInstance.post('/minio/uploadFiles', formData, {
      headers: {
        'Content-Type': 'multipart/form-data',
      },
    })
    console.log('文件上传成功:', response)
    responseData.value = response.data
    return response
  } catch (error) {
    console.error('文件上传失败:', error)
    // 错误处理
  } finally {
    loading.value = false
  }
}

const getImaData = async () => {
  try {
    const response = await httpInstance.get('/qcCode/list')
    console.log('获取文件列表成功:', response)
    imgData.value = response.data
    return response
  } catch (error) {
    console.error('获取文件列表失败:', error)
    // 错误处理
  }
}

const handleCurrentChange = (val) => {
  console.log(val)
}
</script>

<style scoped>
.upload-container {
  max-width: 600px;
  margin: 20px auto;
  padding: 20px;
  border: 1px solid #ebeef5;
  border-radius: 4px;
}

.response-area {
  margin-top: 30px;
  padding: 15px;
  background-color: #f5f7fa;
  border-radius: 4px;
}

pre {
  white-space: pre-wrap;
  word-wrap: break-word;
  background-color: #fff;
  padding: 15px;
  border-radius: 4px;
}

.img-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.pagination {
  margin: 0 auto;
  display: flex;
  justify-content: center;
}
</style>
